<template>
  <div>
    <!-- v-for的指令， 作用是把 Vue 的数据里面的数据或者是对象，遍历出来，进行渲染 -->
    <!-- 但是在后期我们一般会给v-for循环生成的结构中添加key属性， key属性的作用：在数据更新的时候，通过 diff 算法，进行更加高效的真实dom的复用 -->
    <!-- 一般key需要是一个唯一值，否则会报错 -->
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        {{ item }} , {{ index }}
      </li>
    </ul>
    <div>
      <!-- 遍历渲染对象使用得很少 -->
      <span v-for="(value, key) in person">{{ value }},{{ key }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3, 4, 5],
      person: {
        name: "小明",
        age: 16,
        gender: "男",
      },
    };
  },
  methods: {
    change(e) {
      //   console.log("val改变了");
      // 获取最新的 input里面的内容，同步到data里面就可以实现双向绑定
      //   console.log(e.target.value);
      this.val = e.target.value;
    },
  },
};
</script>
